<template>
  <div class="circle-detail">
    <div v-if="circle">
      <nav-bar :title="circle.circleName"></nav-bar>
    </div>
    <van-skeleton v-if="!circle" style="color: white" round title avatar :row="3"/>
    <div v-else>
      <div class="circle-detailed-top">
        <div class="circle-detailed-head">
          <div class="circle-detailed-userHead">
            <van-image height="60px" width="60px" :src="circle.head"></van-image>
          </div>
          <div class="discri">
            <div class="circle-detailed-userName">{{circle.circleName}}</div>
            <div class="description" style="margin-left: 5px;margin-top: 5px;">{{circle.description}}</div>
          </div>

        </div>
        <div class="circle-detailed-follow">
          <van-button  @click="followOrNot" size="small" round type="primary">{{follow ? '取消关注' : '关注'}}</van-button>
        </div>
      </div>
      <talk-card
          style="margin-top: 3px"
          v-for="(item,index) in activities"
          :name="item.user.userName"
          :avatar="item.user.userHead"
          :time-ago="item.updateTime"
          :num="item.loveNumber"
          :text="item.content"
          :id="item.id"
          :activity-name="item.activityName"
          :picture="item.picture"
          :like="item.love"
      ></talk-card>
      <div style="height: 44px"></div>
    </div>
  </div>
</template>

<script>
import TalkCard from '@/components/TalkCard/index';
import NavBar from "@/components/NavBar/NavBar";
import {Toast} from 'vant';

export default {
  name: "CircleDetail",
  data() {
    return {
      id: 0,
      circle: null,
      activities: [],
      follow: false,
      allCircle: []
    }
  },
  components: {
    TalkCard,
    NavBar
  },
  created() {
    this.id = this.$route.query.id;
    this.request();
  },
  methods: {
    getCircle() {
      return axios.get('/circle/getCircleById', {
        params: {id: this.id},
        headers: {isShowFullLoading: 'F'}
      })
    },
    getActivity() {
      return axios.get('/activity/getByCircle', {
        params: {circleId: this.id, pageSize: 20},
        headers: {isShowFullLoading: 'F'}
      })
    },
    getAllCircles() {
      return axios.get('/circle/getFollowCircle', {
        params: {
          curPage: 1,
          pageSize: 10
        },
        headers: {isShowFullLoading: 'F'}
      })
    },
    request() {
      return axios.all([this.getCircle(), this.getActivity(), this.getAllCircles()])
          .then(axios.spread((circle, activities, allCircle) => {
            this.circle = circle.result;
            this.activities.push(...activities.result.result);
            this.activities = this.activities.map((item) => {
              if (item.user.ybUserHead !== null || item.user.userHead == '' || item.user.userHead == null) {
                item.user.userHead = item.user.ybUserHead;
              }
              item.updateTime = _g.timeAgo(item.updateTime);
              item.picture = [];
              if (item.picture1) {
                item.picture.push(item.picture1);
              }
              if (item.picture2) {
                item.picture.push(item.picture2);
              }
              if (item.picture3) {
                item.picture.push(item.picture3);
              }
              return item;
            })

            this.allCircle.push(...allCircle.result.result);

            let res = this.allCircle.find(value => {
              return value.id === this.circle.id;
            });

            if (res) {
              this.follow = true;
            }
          }));
    },
    followOrNot() {
      return axios.post('/circle/follow', {
        id: this.circle.id
      }).then(res => {
        if (res.status === 200) {
          this.follow = !this.follow;
          Toast.success(res.msg);
        } else {
          Toast.fail(res.msg);
        }
      }).catch(err => {
        Toast.fail(err.msg);
      })
    }
  }
}
</script>

<style scoped>
.circle-detailed-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 5px;
}

.circle-detailed-head {
  display: flex;
  /*align-items: center;*/
  font-weight: bolder;
}

.circle-detailed-userName {
  margin-left: 5px;
  margin-top: 5px;
}

.description {
  font-weight: normal;
}
</style>
